<template>
  <el-row :gutter="20">
    <el-card
      class="box-construction"
      shadow="always"
      :style="`height:${Height}px`"
    >
      <div class="box-title box-title-position">
        <div>季度绩效</div>
        <div class="add-btn">
          <el-date-picker
            v-model="yearDate"
            type="year"
            placeholder="选择年份"
            value-format="yyyy"
            @change="searchDate"
            style="width: 40%"
          />
          <el-select
            v-model="searchUser"
            placeholder="请输入人名筛选当前页面数据"
            filterable
            clearable
            style="margin-left: 15px; width: 40%"
            @change="searchChange"
          >
            <el-option
              v-for="(item, index) in usersData"
              :key="item.id + 'qww' + index"
              :label="item.realname"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <el-col :span="4" style="margin-top: 30px">
        <el-tree
          empty-text="暂无数据"
          ref="asyncTree"
          check-strictly
          highlight-current
          :data="data"
          :default-expanded-keys="defaultExpandId"
          :props="treeDefaultProps.defaultProps"
          :expand-on-click-node="false"
          node-key="id"
          @node-click="handleNodeClick"
          :style="`width: 100%;min-height:100px;max-height:${
            Height - 85
          }px;overflow: auto;border: 1px solid #eee;`"
        ></el-tree>
      </el-col>
      <el-col :span="20">
        <el-table
          class="right-box"
          size="small"
          v-loading="rightLoading"
          :data="rightData"
          :max-height="`${Height - 85}`"
          border
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          :style="`width: 100%;`"
        >
          <el-table-column
            v-for="column in columns"
            :key="column.props"
            :prop="column.props"
            :label="column.label"
            :width="column.width ? column.width : ''"
          >
            <template slot-scope="scope">
              <div v-if="column.isTemplate">
                <div v-if="column.quarterLevel">
                  <span v-if="scope.row[column.props]">{{
                    scope.row[column.props] +
                    "（" +
                    scope.row[column.levelScope] +
                    "）/ " +
                    scope.row[column.ownScore]
                  }}</span>
                  <span v-else>--</span>
                </div>
                <div v-if="column.quarterScore">
                  {{ scope.row[column.props] ? scope.row[column.props] : "--" }}
                </div>
              </div>
              <div v-else>{{ scope.row[column.props] }}</div>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div class="no-data right-box" v-else>暂无数据</div> -->
      </el-col>
    </el-card>
  </el-row>
</template>
<script>
import staNewAPI from "@apis/statisticsNew";
import { mapState } from "vuex";
export default {
  data() {
    return {
      searchUser: "", //筛选当前页面的用户
      usersData: [],
      yearDate: "", //时间筛选
      orgid: "", //获取右边数据所需要的部门id
      data: [],
      treeDefaultProps: {
        defaultProps: {
          children: "children",
          label: "orgname",
        },
        defaultExpanded: [1],
      },
      columns: [
        {
          props: "name",
          label: "姓名",
          width: "75",
          isTemplate: false,
          quarterLevel: false,
          quarterScore: false,
        },
        {
          props: "quarterOneLevel",
          levelScope: "quarterOneScope",
          ownScore: "quarterOneScore",
          label: "一季度 等级（参考范围）/ 得分",
          isTemplate: true,
          quarterLevel: true,
          quarterScore: false,
        },
        {
          props: "quarterTwoLevel",
          levelScope: "quarterTwoScope",
          ownScore: "quarterTwoScore",
          label: "二季度 等级（参考范围）/ 得分",
          isTemplate: true,
          quarterLevel: true,
          quarterScore: false,
        },
        {
          props: "quarterThreeLevel",
          levelScope: "quarterThreeScope",
          ownScore: "quarterThreeScore",
          label: "三季度 等级（参考范围）/ 得分",
          isTemplate: true,
          quarterLevel: true,
          quarterScore: false,
        },
        {
          props: "quarterFourLevel",
          levelScope: "quarterFourScope",
          ownScore: "quarterFourScore",
          label: "四季度 等级（参考范围）/ 得分",
          isTemplate: true,
          quarterLevel: true,
          quarterScore: false,
        },
      ],
      rightLoading: false,
      rightData: [],
      tableDatas: [],
    };
  },
  components: {},
  computed: {
    ...mapState({
      userInfo: "auth",
    }),
    Height() {
      return document.documentElement.clientHeight - 110;
    },
    defaultExpandId(){
      return this.data.length?[this.data[0].id]:['']
    }
  },
  created() {
    this.rightLoading = true;
    let date = new Date();
    this.yearDate = String(date.getFullYear());
    this.getTree();
    this.getRightList();
    this.getUserList();
  },
  mounted() {},
  methods: {
    searchChange(val) {
      if (val) {
        this.rightData = this.tableDatas.filter((item) => item.uid == val);
      } else {
        this.rightData = [...this.tableDatas];
      }
    },
    //获取用户数据
    getUserList() {
      staNewAPI
        .getUsers({ pageNo: 1, pageSize: 1000,deleted: 0 })
        .then((res) => {
          this.usersData = [...res.rows];
        })
        .catch((err) => this.$message.error(err.message));
    },
    //获取树状图结构
    getTree() {
      staNewAPI
        .getOrgAll()
        .then((res) => {
          // console.log(res, "res");
          this.data = [...res];
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    //时间筛选函数
    searchDate(value) {
      this.getRightList();
    },
    handleNodeClick(data, node, nodeSelf) {
      this.orgid = data.id; //添加人员所在组织ID orgid
      this.rightLoading = true;
      this.getRightList();
    },

    //右边考核数据
    getRightList() {
      staNewAPI
        .getStatisticQuarter({
          orgid: this.orgid,
          year: this.yearDate,
        })
        .then((res) => {
          // console.log(res, "res");
          this.rightData = [...res];
          this.tableDatas = [...res];
          this.rightLoading = false;
        })
        .catch((err) => {
          this.rightData = [];
          this.rightLoading = false;
          console.log(err, "err");
          this.$message.error(err.message);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.box-title-position {
  position: relative;
  .add-btn {
    position: absolute;
    left: 150px;
    top: -6px;
    right: 15px;
  }
}
.custom-tree-node {
  font-size: 14px;
}
.no-data {
  color: #909399;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  border: 1px solid #eeeeee;
}
.right-box {
  min-height: 40px;
  margin-top: 30px;
}
</style>